<template>
  <div class="radiolist row">
    <label class="radio col row" v-for="(item, index) in options" :key="index">
      <input class="input-checked" v-model="datavalue" type="radio" :value="item.lable" :disabled="disabled">
      <i class="checked"></i>
      <div class="col text" v-html="item.content"></div>
    </label>
  </div>
</template>

<script>

export default{
  name: 'PanduanList',
  components: {
  },
  props: {
    disabled: [String,Boolean],
    value: {
      type: [String, Number],
      default: () => {
        return ''
      }
    },
    options: Array,
  },
  data () {
    return {
      datavalue: this.value
    }
  },
  watch: {
    datavalue (d) {
      this.$emit('input', d)
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.radiolist{
  padding: 10px;
  .radio{
    margin-bottom: 5px;
    .input-checked{
      display: none;
    }
    .input-checked + .checked{
      width: 13px;
      height: 13px;
      border: 1px solid #999999;
      border-radius: 50%;
      margin-top: 4px;
      margin-right: 10px;
    }
    .input-checked:checked + .checked{
      width: 13px;
      height: 13px;
      background: #10A14C;
      border: 1px solid #10A14C;
    }
    .text{
      font-size: 13px;
      color: #666666;
    }
  }
}
</style>